<template>
	<view class="change-name-page">
		<customNavbar name="修改昵称" :isChange="value && value.length > 1 ? true : false"
			@saveHandleClick="saveHandleClick"></customNavbar>
		<view class="text">
			<u--input placeholder="支持2-16位中英文\数字，最多字符不超过16位" border="none" clearable maxlength="16"
				placeholderStyle="font-size:28rpx ;" class="change-name" v-model="value" @change="change"></u--input>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>mei

<script>
	import {
		mapState
	} from "vuex"
	import customNavbar from './common/customNavbar.vue'
	import {
		userUpdate
	} from '@/api/user.js'
	export default {
		components: {
			customNavbar
		},
		computed: {
			...mapState({
				//第一个userInfo是key，第二个是vuex里的
				userInfo: (state) => state.userInfo
			})
		},
		data() {
			return {
				value: ''
			}
		},
		onLoad() {
			this.value = this.userInfo.nickname
		},
		methods: {
			change(val) {
				let reg = /^[^\s]*$/
				if (!reg.test(val)) {
					uni.showToast({
						title: '不能输入空格',
						icon: 'none'
					})
				}
			},
			//保存按钮点击事件
			saveHandleClick() {
				if (this.value && this.value.length > 1) {
					this.updateMsg()
				}
			},
			// 更新  
			async updateMsg() {
				try {
					let {
						sex
					} = this.userInfo
					const res = await userUpdate({
						"username": uni.$u.trim(this.value, 'all'),
						sex: sex || 1
					})
					uni.navigateBack({
						success: () => {
							this.$store.dispatch('getUserInfo')
						}
					})
				} catch (e) {
					this.$refs.uToast.show({
						message: e.message,
						type: 'default'
					})
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.change-name-page {
		padding: 0 40rpx;

		.text {
			background: #F7F7F7;
			border-radius: 10rpx;
			margin-top: 60rpx;
			padding: 20rpx 38rpx;
			line-height: 28rpx;

			.change-name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #A7A7A7;
			}
		}
	}
</style>
